<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.1.10.2.js"></script>
    <!--<script src="js/jquery-1.7.2.min.js"></script>-->
    <script src="js/jquery.transit.js"></script>
</head>
<body>
<!--使用方法
$item.transform({rotate:'60deg})
$item.transform({rotate:'60deg},500)  //不支持transform
$item.animate({rotate:'60deg},500)

用到的内容
1.间隔时间，执行多次    setInterval(function(){},500)
2.延时执行，执行一次   setTimeOut(function(){},500)
-->
<style>
    #box {
        width: 30px;
        height: 50px;
        background: #333333;
    }

    body, div, h2, ul, li, a {
        padding: 0;
        margin: 0;
        font-family: '微软雅黑'
    }

    .mainBox {
        position: relative;
        width: 800px;
        height: 172px;
        overflow: hidden;
        margin: 0 auto
    }

    .mainBox ul li {
        float: left;
        list-style: none;
        width: 200px;
        height: 172px;
        border: 30px solid #ffffff;
        overflow: hidden;
        margin-left: -60px;
        position: relative;
    }
    .mainBox ul li img{
        position: absolute;
    }
    .mainBox h2 {
        left: 50%;
        position: absolute;
        background: rgba(255, 255, 255, 0.6);
        top: 0;
    }

    a {
        position: absolute;
        text-decoration: none;
        font-size: 50px;
        color: red;
        cursor: pointer;
    }

    .btnLeft {
        top: 50%;
        left: 0
    }

    .btnRight {
        top: 50%;
        right: 0;
    }

    .play {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 16px;
    }
</style>
<div class="mainBox">
    <ul>
        <li><img src="images/product1.jpg" alt=""/></li>
        <li><img src="images/product2.jpg" alt=""/></li>
        <li><img src="images/product3.jpg" alt=""/></li>
        <li><img src="images/product4.jpg" alt=""/></li>
    </ul>
    <div class="btnBox">
        <a class="btnLeft">&lt;</a>
        <a class="btnRight">&gt;</a>
        <button class="play" value="play">play</button>
    </div>
    <h2>多图旋转轮播效果</h2>
</div>

<script>
    $(function () {
        //测试定时器
        /*        var i=0
         var begin=setInterval(function(){
         $('#box').animate({rotate:'40deg'})
         //            console.log(i++)
         if(i>5){
         clearInterval(begin)
         }
         },300)*/
        //闭包理解
        /*        var b=33
         function a(){
         var b=0;
         function c(){
         var d=3
         console.log(d)
         }
         c()//3
         console.log(b)//0
         console.log(d)//undefined
         }
         a()*/
        /*****************************jq内容***********************************/
                //使用闭包的目的：保护里面的变量不受污染
        var loopPlayerInit = (function () {
            var $btnLeft=null,
                    $btnRight=null,
                    $btnPlay=null,
                    $imgList=null,
                    origin=['125px','600px'],//用二维数组盛放所有图片
                    imgOrigin=['125px','800px']
                    imgAll=createImg([['images/11.jpg','images/22.jpg','images/33.jpg','images/44.jpg'],
                        ['images/11.jpg','images/22.jpg','images/33.jpg','images/44.jpg'],
                        ['images/55.jpg','images/1.jpg','images/2.jpg','images/3.jpg']]),
                    //盛放所有图片
                    imgArrIndex= 0,
                    imgAng=45,
                    imgTime=300,//每个图片动画间隔300
                    rotating=false,//控制动画是否在进行中
                    autoTimer=null,//定时器
                            autointerval=3000;//定时器间隔时间
            function init(){
               $btnLeft=$('.btnLeft')
                $btnRight=$('.btnRight')
               $btnPlay=$('.play')
               $imgList=$('.mainBox ul li')

                config()
                setEvent();
            }
            function config (){
                //对图片进行遍历,让每个图片在之前的基础上增加15度
                $imgList.each(function(i){
                    var ang=15,
                            aint=-15;//初始角度
                    var $this=$(this)
                    $this.animate({rotate:aint+(ang*i)+'deg'})//每个图片变化的角度：初始角度+变化的角度*当前的索引
                })
            }
            //绑定事件
            function setEvent(){
                //on包含bind,delegate,用on，return false 不起作用
                $btnLeft.bind('click',function(){
                    anigo(-1)
                    return false
                })
                $btnRight.bind('click',function(){
                    anigo(1)
                    return false
                })
                $btnPlay.bind('click',function(){
                    var paly='play',
                            pause='pause',
                            $but=$(this)
                    //判断当前按钮里面文字是啥
                    if($but.text()=='play'){
                        $but.text(pause)
                        autuoGO()
                    }
                    else{
                        $but.text(play)
                        autoStop()
                    }
                    return false
                })
            }
            //创建图片,通过数组的图片转化成
            function createImg(arr){ //arr参数是二维数组，将imgAll传进来
                var imgArr=[]  //一维数组
                for(var i in arr){
//                    console.log(arr[i])
                    imgArr[i]=[]//很重要，将imgArr变为二维数组
                    for(var x in arr[i]){
                        imgArr[i][x]=new Image()
                        imgArr[i][x].src=arr[i][x]
                    }
                }
                return imgArr  //将参数数组转化成数组
            }
            function anigo(d){//参数d代表旋转方向，右边是正，左边是负
                if(rotating)  return false
                rotating=true;
                imgArrIndex+=d;
                if(imgArrIndex>imgAll.length-1){
                    imgArrIndex=0;
                }else if(imgAll.length<0){
                    imgArrIndex=imgAll.length-1
                }

                $imgList.each(function(i){
                    var $thisItem=$(this)
                    var $thisimg=$thisItem.children('img')//原始图片
                    var $targetImg=imgAll[imgArrIndex][i]//插入新的图片,心痛来源imgAll
                    var thisTime=(d===1)?imgTime*i:imgTime*($imgList.length-1-i)  //每个图片间隔时间不一样,通过-1判断是往左还是往右，i代表第几个，每个间隔时间是索引值*时间


                    $thisItem.append($targetImg)//把新图片放到当前位置
//                    $thisimg.animate({origin:imgOrigin,rotate:(0-d)*imgAng+'deg'})
//                    $targetImg.transition({origin:imgOrigin,rotate:imgAng+"deg"});

                    setTimeout(function(){
                        $targetImg.animate({origin:origin,rotate:(0-d)*imgAng+'deg'})  //origin旋转中心,(0-d)*imgAng意思是：不管是往左还是往右旋转，最开始时候都是偏左
                        //旋转，原图片和当前图片一起旋转
                        $targetImg.animate({rotate:'0deg'},500,function(){
                            //删除之前的图片，保证容器里面只有一个图片
                            $thisimg.remove();
                            if(thisTime==(($imgList.length-1)*imgTime)){
                                rotating=false
                            }
                        })
                    },thisTime)

                })
                function autuoGO(){
                    clearInterval(autoTimer)
                    autoTimer=setInterval(function(){
                        anigo(1)//自动从左向右播放
                    },autointerval)
                }
                function autoStop(){
                    clearInterval(autoTimer)
                }
            }
            return init  //记得不加括号
        })()
        loopPlayerInit()


    })
</script>
</body>
</html>